import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import "../styles/Index.scss"
import Tabbar from '../components/Tabbar'

var Home = lazy(() => import('../components/Home'))
var Cate = lazy(() => import('../components/Cate'))
var News = lazy(() => import('../components/News'))
var ShopCart = lazy(() => import('../components/ShopCart'))
var Mine = lazy(() => import('../components/Mine'))
var NotFound = lazy(() => import('../views/NotFound'))


class Index extends Component {
    render() {
        return (
            <div className='index'>
                <Suspense fallback={<div>loading...</div>}>
                    <Switch>
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/cate" component={Cate} />
                        <Route exact path="/index/news" component={News} />
                        <Route exact path="/index/shopcart" component={ShopCart} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>

                <Tabbar className="tabbar" />
            </div>
        );
    }
}

export default Index;